<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graph</title>
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/scholar/scholar.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/scholar/analysis.css">
    <link rel="stylesheet" href="../css/scholar/wisdomAtlas.css">
    <!--<link rel="stylesheet" href="../css/scholar/simulationScroll.css">-->
    <style>

    </style>
</head>
<body style="background-color: #eef3fa; overflow: hidden;">
<div class="content" id="box" v-cloak>
    <div class="top">
        <span class="return">
            <a :href="'searchList.html?keyword='+keyword+'&zh_keyword='+zh_keyword">
            <i class="fa fa-reply" aria-hidden="true"></i></a>
        </span>
        <!--<span class="analysis-logo">NexMagic scholar</span>-->
        <span class="analysis-logo"><img src="../img/scholar/logo1.png" style="height:25px;margin-bottom:15px;"/></span>
    </div>
    <div class="content-all">
        <div class="content-menu">
            <ul>
                <li class="menu-li"><a :href="'analysis.html?version=' + timestamp_"><i class="fa fa-home"></i><span>Home</span></a>
                </li>
                <li class="menu-li"><a :href="'learning.html?version=' + timestamp_"><i class="fa fa-book"></i><span>Academics</span></a>
                </li>
                <li class="menu-li checked"><a :href="'wisdomAtlas.html?version=' + timestamp_"><i
                        class="fa fa-asterisk"></i><span>Graph</span></a>
                </li>
                <li class="menu-li"><a :href="'discovery.html?version=' + timestamp_"><i
                        class="fa fa-compass"></i><span>Find</span></a></li>
            </ul>
        </div>
        <div class="row">
            <div class="content-right">
                <div class="col-md-2 userinfo">
                    <div>
                        <img class="userinfo-head" onerror="nofind(this)"
                             :src="(expert.img != undefined && expert.img != '' && expert.img != null)?(resourceUrl + expert.img):'../img/scholar/head/common-head.png'">
                    </div>
                    <div class="userinfo-span realname" style="margin-bottom: 10px" @click="controlInfo();">
                        <span title="Stephen Hawking">{{expert.name}}</span><i
                            :class="showInfoFlag?'fa fa-chevron-up':'fa fa-chevron-down'"></i>
                    </div>
                    <div v-if="showInfoFlag" class="userInfo-detail">
                        <span class="userinfo-span"><i class="fa fa-briefcase"></i> {{expert.position != undefined ? expert.position : ''}}</span>
                        <span class="userinfo-span"><i class="fa fa-map-marker"></i> {{expert.country != undefined ? expert.country : ''}}</span>
                        <span class="userinfo-span"><i class="fa fa-home"></i> {{expert.authorsOrg}}</span>
                        <div class="skill-div">
                            <span class="skill-item" v-for="(item, index) in expert.foSets"
                                  v-if="index < 5">{{item}}</span>
                        </div>
                    </div>
                    <hr/>
                    <div class="userinfo-table">
                        <table>
                            <tr>
                                <td>N-index:</td>
                                <td>{{expert.nIndex!=undefined?(expert.nIndex).toFixed(2):0}}</td>
                                <td><img id="nIndex-img" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>A-index:</td>
                                <td>{{expert.aIndex!=undefined?(expert.aIndex*100).toFixed(2):0}}</td>
                                <td><img id="aIndex-img" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>I-index:</td>
                                <td>{{expert.iIndex!=undefined?(expert.iIndex*100).toFixed(2):40.00}}</td>
                                <td><img src="../img/scholar/up.png" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>P-index:</td>
                                <td>{{expert.pIndex!=undefined?(expert.pIndex).toFixed(2):0}}</td>
                                <td><img id="pIndex-img" height="9" width="14"/></td>
                            </tr>
                            <tr>
                                <td>#Publications:</td>
                                <td>{{publication}}</td>
                            </tr>
                            <tr>
                                <td>#Citation:</td>
                                <td>{{expert.citations!=undefined?expert.citations:0}}</td>
                            </tr>
                        </table>
                    </div>
                    <hr/>
                    <span class="userInfo-ul" @click="transToAll()">
                        <p :class="atlasMenus=='all'?'selected':''">
                            <i class="fa fa-trophy"></i>
                            All({{scholarRelationNum + institutionRelation.length + fieldRelation.length}})
                            <i></i>
                        </p>
                        <hr/>
                    </span>
                    <span class="userInfo-ul" @click="transToScholar()">
                        <p :class="atlasMenus=='scholar'?'selected':''">
                            <i class="fa fa-user"></i>
                            Scholars({{scholarRelationNum}})
                            <i></i>
                        </p>
                        <hr/>
                    </span>
                    <span class="userInfo-ul" @click="transToInstitution()">
                        <p :class="atlasMenus=='institution'?'selected':''">
                            <i class="fa fa-share-alt"></i>
                            Institutions({{institutionRelation.length}})
                            <i></i>
                        </p>
                        <!-- <ul class="atlasMenus">
                             <li :class="atlasMenus=='all'?'selected':''" >all({{scholarRelationNum + institutionRelation.length + fieldRelation.length}})</li>
                             <li  >scholar({{scholarRelationNum}})</li>
                             <li  >institution({{institutionRelation.length}})</li>
                             <li  >field({{fieldRelation.length}})</li>
                         </ul>-->
                        <hr/>
                    </span>
                    <span class="userInfo-ul" @click="transToField()">
                        <p :class="atlasMenus=='field'?'selected':''">
                            <i class="fa fa-sitemap"></i>
                            Fields({{fieldRelation.length}})
                            <i></i>
                        </p>
                        <hr/>
                    </span>
                </div>
                <div class="col-md-10 chart-main">
                    <div class="content-chart">
                        <div class="chart-box">
                            <ul class="tools">
                                <li><img src="../img/icons/plus.png"/></li>
                                <li><img src="../img/icons/minus.png"/></li>
                                <li><img src="../img/icons/refresh.png"/></li>
                            </ul>
                            <div id="atlas"></div>
                        </div>
                        <!--<div class="bottom-list">
                            <p class="bottom-list-title">New York University</p>
                            <hr/>
                            <div id="scroll" onselectstart="return false" onmousewheel="scrollWheel()">
                                <div class="turn-left turn-box" @click="turnMove('left')"><i
                                        class="fa fa-chevron-left"></i></div>
                                <div class="turn-right turn-box" @click="turnMove('right')"><i
                                        class="fa fa-chevron-right"></i></div>
                                <div id="scroLeft">
                                    <div class="scroll-inline" :style="'width: '+ scrollWidth + 'px'">
                                        <div class="text-block">
                                            <p class="mark-title">Block chaining technology is …</p>
                                            <p class="text-main">
                                                According to the report, Stanford University on 193 global block chain
                                                project research showed that 34% ……
                                            </p>
                                            <span class="pick-bottom">
                                                <div>
                                                    <i class="mark-blue">Emotional:</i>
                                                    <div class="progress">
                                                        <div style="width: 34%" class="progress-bar"></div>
                                                    </div>
                                                </div>
                                                <div><i class="mark-blue">Relation:</i> Quote</div>
                                            </span>
                                        </div>
                                        <div class="text-block">
                                            <p class="mark-title">Professor Sun Zhaofen of …</p>
                                            <p class="text-main">
                                                In June 30th, the interview for the national tour admissions for the
                                                fifty-fifth overseas colleges and universities of Kim ……
                                            </p>
                                            <span class="pick-bottom">
                                                <div>
                                                    <i class="mark-blue">Emotional:</i>
                                                    <div class="progress">
                                                        <div style="width: 65%" class="progress-bar"></div>
                                                    </div>
                                                </div>
                                                <div><i class="mark-blue">Relation:</i> Quote</div>
                                            </span>
                                        </div>
                                        <div class="text-block">
                                            <p class="mark-title">Block chaining technology is …</p>
                                            <p class="text-main">
                                                According to the report, Stanford University on 193 global block chain
                                                project research showed that 34% ……
                                            </p>
                                            <span class="pick-bottom">
                                                <div>
                                                    <i class="mark-blue">Emotional:</i>
                                                    <div class="progress">
                                                        <div style="width: 34%" class="progress-bar"></div>
                                                    </div>
                                                </div>
                                                <div><i class="mark-blue">Relation:</i> Quote</div>
                                            </span>
                                        </div>
                                        <div class="text-block">
                                            <p class="mark-title">Professor Sun Zhaofen of …</p>
                                            <p class="text-main">
                                                In June 30th, the interview for the national tour admissions for the
                                                fifty-fifth overseas colleges and universities of Kim ……
                                            </p>
                                            <span class="pick-bottom">
                                                <div>
                                                    <i class="mark-blue">Emotional:</i>
                                                    <div class="progress">
                                                        <div style="width: 65%" class="progress-bar"></div>
                                                    </div>
                                                </div>
                                                <div><i class="mark-blue">Relation:</i> Quote</div>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div id="scroRight" onclick="scroNow(event)">
                                    <div id="scroLine" OnMouseDown="scroMove()"></div>
                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <span class="bottom-left">中译语通科技股份有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span>
        <span class="bottom-right">Copyright © 2018-京ICP备13002826号-9</span>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/polyfill.min.js"></script>
<script src="../js/vue.min.js"></script>
<!--<script src="../js/build/simulationScroll.js"></script>-->
<script src="../js/echarts/echarts.min.js"></script>
<script src="../js/d3/d3.v3.min.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    var mychart = {};
    var KingVue = new Vue({
        el: '#box',
        data: {
            resourceUrl: "",
            expert: {},
            showInfoFlag: false,
            textNum: 4,
            scrollWidth: 0,
            atlasMenus: "scholar",
            dataPrepare: 0, // 三种数据，每次ajax请求到后都为其+1
            scholarRelation: {},
            scholarRelationNum: 0,
            institutionRelation: {},
            fieldRelation: {},
            keyword: "",
            zh_keyword: "",
            publication: 0,
            timestamp_: new Date().getTime()
        },
        mounted: function () {
            var _this = this;
            _this.resourceUrl = gAjax.resourceUrl;
            _this.expert = getStorage("scholar_expertDetail");
            _this.expert.foSets = _this.expert.foSets.slice(0, 20);
            _this.fieldRelation = _this.expert.foSets;
            _this.dataPrepare++;

            this.scrollWidth = 450 * this.textNum;
            mychart = echarts.init(document.getElementById("atlas"));

            _this.keyword = getStorage("scholar_searchKeyword");
            _this.zh_keyword = encodeURI(_this.keyword)

            /*判断默认显示’专家之间关系‘或‘专家与机构关系’*/
            _this.initData();
            /*_this.queryPIndexTrend();*/

            var jnum = _this.expert.jnum != undefined && _this.expert.jnum >= 0 ? _this.expert.jnum : 0;
            var cnum = _this.expert.cnum != undefined && _this.expert.cnum >= 0 ? _this.expert.cnum : 0;
            var bnum = _this.expert.bnum != undefined && _this.expert.bnum >= 0 ? _this.expert.bnum : 0;
            var patentnum = _this.expert.patentnum != undefined && _this.expert.patentnum >= 0 ? _this.expert.patentnum : 0;
            var sum = jnum + cnum + bnum + patentnum;
            _this.publication = sum;

            $("#nIndex-img").attr("src", getStorage("nIndex-img"));
            $("#aIndex-img").attr("src", getStorage("aIndex-img"));
            $("#pIndex-img").attr("src", getStorage("pIndex-img"));
        },
        methods: {
            controlInfo: function () {
                var _this = this;
                _this.showInfoFlag = !_this.showInfoFlag;
            },
            turnMove: function (flag) {
                scrollWheel(flag);
            },
            initData: function () {
                var _this = this;
                gAjax.request("org/getRelateOrg", {id: _this.expert.id}).then(function (result) {
                    _this.institutionRelation = result;
                    _this.dataPrepare++;
                });
                gAjax.requestNoAsync("expert/getRelateExpert", {id: _this.expert.id}).then(function (result) {
                    _this.scholarRelation = result;
                    //console.log("------"+JSON.stringify(result))
                    _this.dataPrepare++;
                });
            },
            transToScholar: function (flag) {
                var _this = this;
                _this.atlasMenus = "scholar";
                var data = [];
                var links = [];
                for (var key in _this.scholarRelation) {
                    var expert_l = _this.scholarRelation[key];
                    if (expert_l.length > 0) {
                        data.push({
                            name: key,
                            symbol: "image://../img/icons/" + key + ".png",
                            symbolSize: 60,
                            itemStyle: {
                                color: '#4f5d73'
                            }
                        });
                        links.push({
                            source: _this.expert.name,
                            target: key,
                            lineStyle: {
                                color: key == "publish" ? "#903ef3" : "#e96c7a",
                                width: 2
                            }
                        });
                    }
                    for (var i in expert_l) {
                        data.push({
                            scholarId: expert_l[i].id,
                            name: expert_l[i].name + "!!!" + parseInt(i) + key,
                            /*symbol: "image://" + (expert_l[i].img == undefined || expert_l[i].img.length < 1 ? "../img/scholar/head/user-head.png" : _this.resourceUrl + expert_l[i].img),*/
                            symbol: "image://../img/dataGalaxy/"+(key == "publish" ? "6" : "1")+".png",
                            itemStyle: {
                                color: '#4f5d73'
                            }
                        });
                        links.push({
                            source: key,
                            target: expert_l[i].name + "!!!" + parseInt(i) + key,
                            lineStyle: {
                                color: key == "publish" ? "#903ef3" : "#e96c7a",
                                width: 2
                            }
                        });
                    }
                }
                if (flag) {
                    return {data: data, links: links};
                } else {
                    data.push({
                        name: _this.expert.name,
                        symbol: "image://" + (_this.expert.img != undefined ? (_this.resourceUrl + _this.expert.img) : '../img/scholar/head/common-head.png'),
                        symbolSize: 60
                    });
                    _this.showGraph(data, links);
                }
            },
            transToInstitution: function (flag) {
                var _this = this;
                _this.atlasMenus = "institution";
                var data = [];
                var links = [];
                if (_this.institutionRelation.length > 0) {
                    data.push({
                        name: "institution",
                        symbol: "image://../img/icons/institution.png",
                        symbolSize: 60,
                        itemStyle: {
                            color: '#4f5d73'
                        }
                    });
                    links.push({
                        source: _this.expert.name,
                        target: "institution",
                        lineStyle: {
                            color: "#0ec2bf",
                            width: 2
                        }
                    });
                }

                for (var key in _this.institutionRelation) {
                    var org = _this.institutionRelation[key];
                    data.push({
                        name: org.name + "!!!" + parseInt(key),
                        symbol: "image://../img/dataGalaxy/4.png",
                        itemStyle: {
                            color: '#4f5d73'
                        },
                        value: org.name
                    });
                    links.push({
                        source: "institution",
                        target: org.name + "!!!" + parseInt(key),
                        lineStyle: {
                            color: "#0ec2bf",
                            width: 2
                        }
                    });
                }
                if (flag) {
                    return {data: data, links: links};
                } else {
                    data.push({
                        name: _this.expert.name,
                        symbol: "image://" + (_this.expert.img != undefined ? (_this.resourceUrl + _this.expert.img) : '../img/scholar/head/common-head.png'),
                        symbolSize: 60
                    });
                    _this.showGraph(data, links);
                }
            },
            transToField: function (flag) {
                var _this = this;
                _this.atlasMenus = "field";
                var data = [];
                var links = [];
                if (_this.fieldRelation.length > 0) {
                    data.push({
                        name: "field",
                        symbol: "image://../img/icons/field.png",
                        symbolSize: 60,
                        itemStyle: {
                            color: '#4f5d73'
                        }
                    });
                    links.push({
                        source: _this.expert.name,
                        target: "field",
                        lineStyle: {
                            color: "#f2b92f",
                            width: 2
                        }
                    });
                }
                for (var i in _this.fieldRelation) {
                    var field = _this.fieldRelation[i];
                    data.push({
                        name: field + "!!!" + parseInt(i),
                        symbol: "image://../img/dataGalaxy/3.png",
                        itemStyle: {
                            color: '#4f5d73'
                        }
                    });
                    links.push({
                        source: "field",
                        target: field + "!!!" + parseInt(i),
                        lineStyle: {
                            color: "#f2b92f",
                            width: 2
                        }
                    });
                }
                if (flag) {
                    return {data: data, links: links};
                } else {
                    data.push({
                        name: _this.expert.name,
                        symbol: "image://" + (_this.expert.img != undefined ? (_this.resourceUrl + _this.expert.img) : '../img/scholar/head/common-head.png'),
                        symbolSize: 60
                    });
                    _this.showGraph(data, links);
                }

            },
            transToAll: function () {
                var _this = this;
                var obj = _this.transToField(true);
                var transToScholarData = _this.transToScholar(true);
                obj.data.push.apply(obj.data, transToScholarData.data);
                obj.links.push.apply(obj.links, transToScholarData.links);
                var transToInstitutionData = _this.transToInstitution(true);
                obj.data.push.apply(obj.data, transToInstitutionData.data);
                obj.links.push.apply(obj.links, transToInstitutionData.links);
                _this.atlasMenus = "all";
                obj.data.push({
                    name: _this.expert.name,
                    symbol: "image://" + (_this.expert.img != undefined ? (_this.resourceUrl + _this.expert.img) : '../img/scholar/head/common-head.png'),
                    symbolSize: 60
                });
                //console.log(JSON.stringify(obj))
                _this.showGraph(obj.data, obj.links);
            },
            showGraph: function (data, links, tooltip) {
                console.log(this.atlasMenus)
                var option = {
                    tooltip: {//鼠标悬浮弹窗提示
                        /*  trigger: 'axis' */
                        trigger: 'item',
                        show: true,
                        showDelay: 0,
                        hideDelay: 0,
                        transitionDuration: 0,
                        backgroundColor: 'rgba(0,0,0,0.8)',
                        borderColor: '#414141',
                        borderRadius: 8,
                        borderWidth: 2,
                        padding: 10,    // [5, 10, 15, 20]
                        formatter: function (params) {
                            return params.name.split("!!!")[0];
                        },
                    },
                    animation: false,
                    series: [{
                        type: 'graph',
                        layout: 'force',
                        symbolSize: 25,
                        /*hoverAnimation: true,*/
                        focusNodeAdjacency: true,
                        draggable: false,
                        /*edgeSymbol: ['', 'arrow'],*/
                        lineStyle: {
                            normal: {
                                opacity: 1,
                                width: 2
                            }
                        },
                        data: data,
                        links: links,
                        roam: true,
                        label: {
                            normal: {
                                show: false,
                                position: 'right',
                                formatter: function (params) {
                                    return params.name.split("!!!")[0].substring(0, 50);
                                },
                            },

                        },
                        force: {
                            repulsion: 100,
                            gravity: 0.03,
                            edgeLength: 130
                        },
                    }]
                };
                mychart.setOption(option);
            },

            queryPIndexTrend: function () {
                var _this = this;
                gAjax.request("expert/queryPIndexTrend", {
                    id: _this.expert.id
                }).then(function (result) {
                    console.log(result);
                    if (result == 0) {
                        $("#pIndex-img").attr("src", "../img/scholar/stable.png");
                    } else if (result == 1) {
                        $("#pIndex-img").attr("src", "../img/scholar/up.png");
                    } else if (result == -1) {
                        $("#pIndex-img").attr("src", "../img/scholar/down.png");
                    }
                })
            },
        },
        watch: {
            scholarRelation: function () {
                var _this = this;
                for (var key in _this.scholarRelation) {
                    _this.scholarRelationNum += _this.scholarRelation[key].length
                }
                if (getUrlParam("atlasType") == "scholar") {
                    _this.transToScholar();
                }
            },
            institutionRelation: function () {
                var _this = this;
                if (getUrlParam("atlasType") == "institution") {
                    _this.transToInstitution();
                }
            },
            dataPrepare: function () {/*默认显示all，需三种数据全部加载完成*/
                var _this = this;
                if (_this.dataPrepare == 3 && getUrlParam("atlasType") == undefined) {
                    _this.transToAll();
                }
            }
        }
    });


    mychart.on('click', function (params) {
        var scholarId = params.data['scholarId'];
        if (scholarId) {
            window.location.href = "analysis.html?scholarId=" + scholarId;
        } else {
            var keyword = params.name.split("!!!")[0];
            if (keyword != "field" && keyword != "publish" && keyword != "institution" && keyword != "write") {
                window.location.href = "searchList.html?keyword=" + keyword;
            }
        }
    });
</script>
</body>
</html>